<template>
    <div>
      <h2>员工列表</h2>
      <input type="text" v-model="keyword"> <button @click="sub">搜索</button>
      <table align="center">
        <tr>
          <td>编号</td>
          <td>姓名</td>
          <td>部门</td>
          <td>操作</td>
        </tr>
        <tr v-for="i in staffs">
          <td>{{i.id}}</td>
          <td>{{i.username}}</td>
          <td>{{i.cate_name}}</td>
          <td>
            <button @click="delx(i.id)">删除</button>
          </td>
        </tr>
      </table>
      <button v-if="previous" @click="pagx(p-1)">上一页</button>
      <button v-for="i in page" @click="pagx(i)">{{i}}</button>
      <button v-if="next" @click="pagx(p+1)">下一页</button>
    </div>
</template>

<script>
    export default {
        name: "Staff",
        data(){
          return{
            staffs:[],
            page:[],
            previous:false,
            next:false,
            p:1,
            keyword:'',
          }
        },
        mounted() {
          this.common()
        },
        methods:{
          common(){
            this.axios({
              url:'http://127.0.0.1:8000/app01/staff/',
              method:'get',
              params:{'p':this.p,'keyword':this.keyword}
            }).then(res=>{
              this.staffs=res.data.data.data;
              this.page=res.data.data.page;
              this.previous=res.data.data.previous;
              this.next=res.data.data.next;
            })
          },
          pagx(p){
            this.p=p;
            this.common()
          },
          sub(){
            this.common()
          },
          delx(id){
            let flag=confirm('确定删除吗？')
            if(!flag){
              return false
            }
            let formdata=new FormData();
            formdata.append('id',id)
            this.axios({
              url:'http://127.0.0.1:8000/app01/staff/',
              method:'delete',
              data:formdata,
            }).then(res=>{
              if(res.data.code==1000){
                // 删除成功
                this.common()
              }else{
                alert(res.data.msg)
              }
            })
          }
        }
    }
</script>

<style scoped>

</style>
